<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f0f1f1;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .top {
            height: 49px;
            background-color: #323232;
        }
        
        .top .img {
            float: left;
            width: 183px;
            height: 116px;
            /* position: fixed; */
            position: absolute;
            top: 0;
            /* overflow: hidden; */
        }
        
        .top ul {
            /* float: right; */
            width: 485px;
            height: 49px;
            /* background-color: pink; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            float: left;
            margin-left: 49px;
            /* overflow: hidden; */
            padding-left: 200px;
        }
        
        .top ul li {
            width: 87px;
            height: 49px;
            line-height: 49px;
            text-align: center;
            color: #817979;
        }
        
        .top ul li:hover {
            background-color: #dd4012;
        }
        
        .top ul li:hover a {
            color: white;
        }
        
        .top .top-con .first {
            background-color: #dd4012;
            color: white;
        }
        
        .top a {
            color: #817979;
        }
        
        .top-rt {
            width: 270px;
            height: 49px;
            float: right;
            line-height: 49px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .top-con {
            width: 1107px;
            height: 49px;
            margin: auto;
            /* background-color: pink; */
        }
        
        .middle {
            width: 1107px;
            height: 1180px;
            margin: auto;
            background-color: white;
            margin-top: 96px;
            margin-bottom: 35px;
        }
        
        .middle-con {
            width: 993px;
            height: 1180px;
            margin: auto;
            /* background-color: burlywood; */
            overflow: hidden;
        }
        
        .title {
            width: 993px;
            height: 60px;
            /* background-color: cadetblue; */
            margin-top: 45px;
            border-bottom: 1px solid #f0f1f1;
        }
        
        .title h3 {
            margin-bottom: 23px;
            font-size: 17px;
        }
        
        .title h4 {
            font-size: 12px;
        }
        
        .banner img {
            width: 993px;
            margin-top: 30px;
        }
        
        .middle p {
            margin-bottom: 35px;
            line-height: 32px;
            color: #333333;
            font-size: 14px;
        }
        
        .foot {
            height: 82px;
            background-color: #323232;
            overflow: hidden;
        }
        
        .foot-con {
            width: 1107px;
            height: 82px;
            /* background-color: paleturquoise; */
            margin: auto;
        }
        
        .foot-con .foot-lf {
            width: 164px;
            height: 82px;
            /* line-height: 82px; */
            float: left;
            /* background-color: plum; */
            display: flex;
            align-items: center;
        }
        
        .foot-con .foot-rt {
            width: 620px;
            height: 82px;
            float: right;
            /* background-color: peachpuff; */
        }
        
        .foot-con .foot-rt1 {
            width: 384px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            float: right;
            margin-top: 20px;
            margin-bottom: 10px;
            color: #999999;
        }
        
        .foot-con .foot-rt2 {
            width: 610px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            float: right;
            color: #666666;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="top-con">
            <div class="img">
                <img src="img/logo.jpg" alt="">
            </div>

            <ul>
                <li><a href="index.html">网站首页</a></li>
                <li><a href="">传悦资源</a></li>
                <li><a href="caseList.html">传悦案例</a></li>
                <li><a href="">传悦服务</a></li>
                <li class="first"><a href="solution.html" style="color: white;">解决方案</a></li>
                <li><a href="">需求提交</a></li>
            </ul>
            <div class="top-rt">
                <img src="img/tel.png" alt="" class="tel"><span style="color:#817979 ;">0535-606552189</span>
                <img src="img/qq.png" alt="" class="qq">
                <img src="img/wb.png" alt="" class="wb">
                <img src="img/wx.png" alt="" class="wx">
                <img src="img/email.png" alt="" class="email">
            </div>
        </div>
    </div>
    <div class="middle">
        <div class="middle-con">
            <div class="title">
                <h3></h3>
                <h4></h4>
            </div>
            <div class="banner">
                <img src="" alt="">
            </div>
            <p class="p1"></p>
            <p class="p2"></p>
            <p class="p3"></p>
            <p class="p4"></p>
            <p class="p5"></p>
            <p class="p6"></p>

        </div>
    </div>
    <div class="foot">
        <div class="foot-con">
            <div class="foot-lf">
                <img src="img/logo小.png" alt="">
            </div>
            <div class="foot-rt">
                <ul class="foot-rt1">
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <ul class="foot-rt2">
                    <li>Copyright 2013</li>
                    <li>创梦网络科技有限公司</li>
                    <li>传悦Chnyoo.cn All Rights Reserved</li>
                    <li>京ICP备12005221号</li>
                </ul>
            </div>
        </div>
    </div>
</body>

<script>
    String.prototype.parseUrl = function() {
        if (this.indexOf("?") === -1) {
            return {};
        }
        let result = {}
        this.slice(this.indexOf("?") + 1).split("&").forEach(item => {
            let arr = item.split("=");
            result[arr[0]] = arr[1]
        })
        return result;
    }



    let id = location.href.parseUrl().id;
    let http = new XMLHttpRequest()
    let middle1 = document.querySelector(".middle1");
    let model = document.querySelector('#model');

    http.open("get", `http://10.35.164.15:81/solutiondetail?id=${id}`)
    http.send();
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            let List2 = JSON.parse(http.responseText);
            let h3 = document.querySelector("h3");
            let h4 = document.querySelector("h4");
            let img = document.querySelector(".banner img");
            let p1 = document.querySelector(".p1");
            let p2 = document.querySelector(".p2");
            let p3 = document.querySelector(".p3");
            let p4 = document.querySelector(".p4");
            let p5 = document.querySelector(".p5");
            let p6 = document.querySelector(".p6");

            List2.forEach(function(item) {
                h3.innerHTML = item.h3;
                h4.innerHTML = item.h4;
                p1.innerHTML = item.p1;
                p2.innerHTML = item.p2;
                p3.innerHTML = item.p3;
                p4.innerHTML = item.p4;
                p5.innerHTML = item.p5;
                p6.innerHTML = item.p6;
                img.src = item.img1;


            });
        }

    }
</script>

</html>